"use client";
import { FC, PropsWithChildren, useState } from "react";
import clsx from "clsx";
import ButtonOwn from "@/components/ButtonOwn";
import "./style.scss";

/**
 * @description 登录注册From表单
 * @param {string} type 使用类型
 * @param {() => void} callbackFun 回调方法
 */
export interface FromComProps {
    type?: string;
    text?: string;
    callbackFun?: () => void;
}

const FromCom: FC<PropsWithChildren<FromComProps>> = ({type = 'login', callbackFun}) => {
    let [visible, setVisible] = useState(false)

    const spanClassName = clsx("iconfont", {
        "icon-kejian": visible,
        "icon-bukejian": !visible,
    });

    return (
        <div className="FromCom">
            <div className="phoneInput">
                <span className="after">+55</span>
                <input type="tel" placeholder="Número de Celular" maxLength={11}/>
            </div>
            <div className="passwordInput">
                <input type={visible?'text':'password'} placeholder="Senha" />
                <span className={spanClassName} onClick={() => setVisible(!visible)}></span>
            </div>
            <div className="btnContent">
                <div className="tips"> O número de telefone não existe. </div>
                <ButtonOwn active={true}>{type == 'login'? 'Login' : 'Criar conta'}</ButtonOwn>
            </div>
            <div className="link">
                {
                    type == 'login' ? (
                        <>
                            <span>Esqueci minha senha?</span>
                            <span>Criar Conta Nova</span>
                        </>
                    ) : <span className="active">Já tem uma conta? Log in</span>
                }     
            </div>
        </div>
    );
};

export default FromCom;